<template>
  <div class="header-song">
    <div class="ar">
      <span class="yu-titleColor">歌手：</span>
      <span class="yu-color-text yu-textColor-hover cursor-pointer" v-for="(song, index) in songInfo.ar" :key="song.id" @click="jumpArtistDetails(song.id)">
        {{ song.name }}
         <span v-if="index < songInfo?.ar?.length - 1"> / </span>
      </span>
    </div>
    <div class="al">
      <span class="yu-titleColor">专辑：</span>
      <span class="yu-color-text yu-textColor-hover cursor-pointer" @click="jumpAlbum(songInfo.al.id)">{{ songInfo.al.name }}</span>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";

const router = useRouter()
const props = defineProps({
  songInfo: Object
})

// 跳转到歌手详情
const jumpArtistDetails = (id) => {
  router.push({
    path: '/artist',
    query: {
      id
    }
  })
}

// 跳转到专辑
const jumpAlbum = (id) => {
  router.push({
    path: '/collection-detail',
    query: {
      id
    }
  })
}
</script>

<style scoped lang="scss">
.header-song {
  .ar, .al {
    display: flex;
    align-items: center;
    height: 32px;
  }
}
</style>
